<template>
  <div>
    <div class="shopping-car-list">
      <el-checkbox-group v-model="buy" @change="change">
        <el-table
          :data="tableData"
          style="width: 100%; height: 500px; overflow-y: scroll"
        >
          <el-table-column align="center" width="50px">
            <template slot-scope="col">
              <div class="center">
                <el-checkbox :label="col.$index">{{ "" }}</el-checkbox>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="commodityName"
            label="商品"
            width="180"
            align="center"
          >
            <template slot-scope="{ row }">
              <div class="commodity-info">
                <div>
                  <el-image :src="loadImg(row.assets)" />
                </div>
                <div>
                  <span>商品名称: {{ row.commodityName }}</span>
                  <span
                    >单价: <span class="price">{{ row.price }}</span></span
                  >
                  <span>编号: {{ row.code }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" align="center">
            <template slot-scope="{ row }">
              <el-input-number
                v-model="row.count"
                @change="count(row)"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="小计/元" align="center">
            <template slot-scope="{ row }">
              {{ row.price * row.count }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button size="mini" type="danger" @click="remove(row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-checkbox-group>
    </div>
    <div class="buy">
      <div>
        总金额: <span>{{ totalPrice }}</span
        >元
        <el-button size="medium" type="danger">去支付</el-button>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      buy: [],
      totalPrice: 0,
      tableData: [],
    };
  },

  watch: {
    tableData: function () {
      this.calculateTotalPrice();
    },
    buy: function () {
      this.calculateTotalPrice();
    },
  },
  methods: {
    calculateTotalPrice() {
      var total = 0
      this.buy.forEach((item) => {
        var data = this.tableData[item];
        total += data.price * data.count;
      });
      this.totalPrice = total
    },
    change() {},
    loadImg(assets) {
      return assets && assets.length > 0 ? this.$getImgURI(assets[0]) : null;
    },
    loadShopping() {
      this.$haier.get("openapi/shopping").then(({ data }) => {
        this.tableData = data;
      });
    },
    count(row) {
      this.$haier
        .put("openapi/shopping", {
          shoppingId: row.code,
          count: row.count,
        })
        .then(() => {
          this.loadShopping();
        });
    },
    remove(row) {
      this.$haier
        .delete("openapi/shopping", {
          shoppingId: row.code,
        })
        .then(() => {
          this.loadShopping();
        });
    },
  },
  created() {
    this.requireLogin().then(() => {
      this.loadShopping();
    });
  },
};
</script>

<style scoped>
.shopping-car-list {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 50px;
}

.el-image {
  height: 100px;
  width: 100px;
}

.commodity-info {
  text-align: left;
}

.commodity-info div > span {
  display: block;
  width: 200px;
}

.commodity-info span:first-child {
  font-size: 1em;
  font-weight: bold;
}

.price {
  color: rgba(255, 0, 0, 0.514);
}
.center {
  text-align: center;
}

.buy {
  height: 20px;
  padding-bottom: 50px;
  width: 100%;
}

.buy > div {
  position: absolute;
  height: 100%;
  right: 200px;
}

.buy span:first-child {
  display: inline-block;
  font-size: 2em;
  color: red;
  text-indent: 5px;
}
</style>